<template>
  <view class="wrap">
    <uv-navbar :fixed="false" title="话题管理" autoBack safeAreaInsetTop placeholder :border='false'>
      <template v-slot:right>
        <view class="navEditName nav-right" @click="tapDetail">{{ deleteShow ? '完成' : '管理' }}</view>
      </template>
    </uv-navbar>
    <view class="desc">请设置社群话题，设置后，发表主题时会优先提示使用社群标签(最多可设置50个)</view>
    <view class="list" v-if="!showLeng">
      <view class="item" v-for="(item, index) in list" :key="index" @click="editValue(item)">
        <view class="icon" @click.stop="deleteRow(item)" v-if="deleteShow">
          <image src="/static/delete.png" class="img"></image>
        </view>
        <view class="test">{{ item.name }}</view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    <view class="footer" v-if="!deleteShow">
      <button class="btn" @click="addTopic">添加话题</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    
    <uv-modal ref="modal" title="提示" confirmColor='#E43222' showCancelButton @confirm="confirm">
      <view style="text-align: center;">
        是否确认删除？
      </view>
    </uv-modal>
    <uv-modal ref="editModal" title="编辑" confirmColor='#E43222' showCancelButton @confirm="editConfirm">
      <view class="slot-content" style="width: 100%;">
        <uv-input v-model="itemRows.name"></uv-input>
      </view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { post } from '@/api';
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useOrder } from '@/store';
import { toast } from '@/common';

const modal = ref(null);
const editModal = ref(null);

let deleteShow = ref(false);
let rows = {};
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);
let itemRows = ref({
  id: '',
  name: ''
});

const body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

onShow(() => {
  page = 1;
  list.value = [];
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})
// 获取列表数据
function getList(){
  const params = {
    association_id: body.value.id,
    page: page,
    limit: 20
  }
  post('api/association_talk/getAssociationTalkList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 删除话题
function confirm(){
  post('api/association_talk/delAssociationTalk', { talk_id: rows.id }).then(res => {
    if(res.code == 1){
      toast('删除成功');
      page = 1
      list.value = [];
      getList();
    }
  })
}
function editConfirm(){
  const params = {
    name: itemRows.value.name,
    talk_id: itemRows.value.id
  }
  post('api/association_talk/editAssociationTalk', params).then(res => {
    if(res.code == 1){
      toast('修改成功');
      page = 1;
      list.value = [];
      getList();
    }
  })
}
function deleteRow(item){
  rows = uni.$uv.deepClone(item);
  modal.value.open();
}
function tapDetail(){
  deleteShow.value = !deleteShow.value;
}
function addTopic(){
  if(total >= 50) return toast('最多只能添加50个');
  uni.navigateTo({
    url: '/pages/group/setting/topicAdd'
  });
}
function editValue(item){
  itemRows.value = uni.$uv.deepClone(item);
  editModal.value.open();
}
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
  }
  .list{
    padding: 0 30rpx;
    background-color: #fff;
    .item{
      width: 100%;
      height: 88rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #EFEFEF;
      &:last-child{
        border-bottom: 0;
      }
      .icon{
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }
      .test{
        font-weight: 500;
        font-size: 32rpx;
        color: #2B2B2B;
      }
    }
  }
  .desc{
    padding: 26rpx 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    &.nav-right{
      color: #E43222;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>